<template>
    <div class="main_content">
        <div class="left">
            <div class="tree">
                <el-tree :data="treeData" @node-click="getTreeId" :default-expanded-keys="expandedKeys" node-key="id"></el-tree>
            </div>
        </div>
        <div class="right">
            <div class="top">
                <el-button type="primary"  @click="updateRow(0)" :disabled="typeFlag" size="small" plain>+ 添加算法</el-button>
            </div>
            <div class="list" v-if="list.length>0">
                <div class="item" v-for="(item , index ) in list" :key='index' @mouseenter="mouseenterFn(item)" @mouseleave="mouseleaveFn(item)"> 
                    <img :src="item.iconUrl" alt="" class="img">
                    <div class="text">{{item.name}}</div>
                    <img src="../../assets/images/sys/algConfig/rule_del.png" alt="" class="delImg" @click="removeRow(index, list)" v-if="item.flag">
                </div>
            </div>
            <div v-else class="no_lsit">
                <img src="./../../assets/images/sys/algConfig/sys_setting.png" alt="">
            </div>
            <div class="clearfix" v-show="list.length>0">
                <Page v-if="totalCount" :current.sync="current" :total="totalCount" :page-size="10" show-elevator show-total @on-change="pageChange"></Page>
            </div>
        </div>

        <Modal v-model="addModel" title="添加算法" width="900px;" :mask-closable="false" :footer-hide='unList.length>0?false:true'>
            <div class="addModel">
                <div class="bottom">
                        <h2 style=" width: 98%;color:#1891FF;margin: 0 20px;">算法类型</h2>
                        <div class="list" v-if="unList.length>0">
                             <div  class="item" v-for="item in unList" :key='item.id' @click="setBtn(item)" :class="item.flag==true?'active':''">
                                 <img :src="item.iconUrl" alt="" class="img" >
                                 <div class="text">{{item.name}}</div>

                             </div>
                         </div>
                         <div v-else class="no_lsit">
                                <img src="./../../assets/images/sys/algConfig/sys_setting.png"  style="width:460px;height:300px;margin:0 auto;" alt="">
                            </div>
                         <div class="clearfix" v-show="unList.length>0">
                            <div class="float-right" style="width:98%;">
                                <Page v-if="totalCount" style="margin: 20px 0;text-align: right;" :current.sync="unconfigCurrent" :total="unconfigTotalCount" :page-size="unconfigPageSize" show-elevator show-total @on-change="unconfigPageChange"></Page>
                            </div>
                        </div>
                    </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submit" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { toTree, trans } from "@/sever/config.js";
import {
    getRuleconfList,
    getRuleUnconfList,
    getDeptTree,
    getRuleAddconf,
    getRuleDelconf
} from "@/api/api.js";
export default {
    data() {
        return {
           expandedKeys:[],
           id:'',
           totalCount: 0,
           current: 1,
           pageNum: 1,
           pageSize: 10,
           unconfigTotalCount: 0,
           unconfigCurrent: 1,
           unconfigPageNum: 1,
           unconfigPageSize: 6,
           deptId:"",
           type:"",
           treeData: [],
           list:[],
           unList:[],
           addModel : false,
           deleteModal : false,
           typeFlag : false,

        };
    },
    methods: {
        mouseenterFn(item){
            this.list.forEach(v=>{
                if(item.id==v.id){
                    v.flag = true
                }
            })
        },
        mouseleaveFn(item){
            this.list.forEach(v=>{
                if(item.id==v.id){
                    v.flag = false
                }
            })
        },
        setBtn(item){
            this.unList.forEach(v=>{
                if(item.id==v.id){
                    v.flag = !v.flag;
                }
            })
        },
        removeRow(index,rows) {
            this.deleteModal = true;
            this.type = rows[index].type;
        },
        detele(){
            let deptId = this.deptId;
            let type = this.type;
            let params = deptId+'/'+type
            getRuleDelconf(params).then(res=>{
                if (res.code == 200) {
                    this.$Message.success("操作成功");
                    this.getDeptTreeFn();
                    this.deleteModal = false;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        submit(){
            let types = [];
            this.unList.forEach(v=>{
                if(v.flag){
                    types.push(v.type)
                }
            })
            if(types.length==0){
                this.$Modal.warning({
                    title: "提示",
                    content: "请选择算法类型"
                });
                return;
            }
            let params = {
                types,
                deptId:this.deptId,
            }
            getRuleAddconf(params).then(res => {
                if (res.code == 200) {
                    this.addModel = false;
                    this.$Message.success("添加成功");
                    this.getRuleconfListFn();
                    this.getRuleUnconfListFn();
                } else {
                    this.$Message.warning(res.msg);
                }
             })
             .catch(error => {
                 console.log(error);
             });
        },
        updateRow(type){
            if(type===0){
                this.addModel = true;
            }
        },
        getTreeId(index) {
            if(index.type==1){
                this.typeFlag = false;
            }else{
                this.typeFlag = true;
            }
            this.deptId = index.id;
            
            this.getRuleconfListFn();
            this.getRuleUnconfListFn();
        },
        getDeptTreeFn() {
            getDeptTree()
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.treeData = trans(this.list);
                        
                        this.getRuleconfListFn();
                        this.getRuleUnconfListFn();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getRuleconfListFn() {
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                deptId: this.deptId
            };
            getRuleconfList(params)
                .then(res => {
                    if (res.code == 200) {
                        let list  = res.data.list;
                        list.forEach(v=>{
                            v['flag'] = false;
                        })
                        this.list = list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getRuleUnconfListFn() {
            let params = {
                pageSize: this.unconfigPageSize,
                pageNum: this.unconfigPageNum,
                deptId: this.deptId
            };
            getRuleUnconfList(params)
                .then(res => {
                    if (res.code == 200) {
                        let list = res.data.list;
                        list.forEach(v=>{
                            v["flag"] = false;
                        })
                        this.unList = list;
                        this.unconfigTotalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },

        pageChange(index) {
            this.pageNum = index;
            this.getRuleconfListFn();
        },
        unconfigPageChange(index) {
            this.unconfigPageNum = index;
            this.getRuleUnconfListFn();
        },
        
        searchAll() {
            this.pageNum = 1;
            this.getRuleconfListFn();
        },
        cancel(type){
            if(type==1){
                this.addModel = false;
            }else if(type==2){
                this.deleteModal = false
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.expandedKeys.push(this.deptId)
        this.getDeptTreeFn();
    },
};
</script>

<style lang="less" scoped>
.main_content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    display: flex;
    .left{
        width: 250px;
        height: 100%;
        margin-right: 10px;
        background: #fff;
        border-radius: 10px;
        .tree{
            width: 250px;
            margin:0 auto;
            margin-top: 20px;
            height: calc(100% - 100px);
            overflow-y: scroll;
        }
        .tree::-webkit-scrollbar {
            display: none;
        }
        /*兼容火狐*/
        .tree {
            scrollbar-width: none;
        }
        /* 兼容IE10+ */
        .tree {
            -ms-overflow-style: none;
        }
    }
    .right {
        flex: 1;
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
        .list {
            margin: 10px 0;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .item{
                width: 250px;
                height: 220px;
                margin: 10px;
                position: relative;
                &:nth-of-type(5n){
                    margin-right: 0;
                }
                .img{
                    display: block;
                    width: 250px;
                    height: 220px;
                }
                .delImg{
                    position: absolute;
                    right: -10px;
                    top: -10px;
                    width: 20px;
                    height: 20px;
                    cursor: pointer;
                }
                .text{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    color: #fff;
                }
            }
        }
        .clearfix{
            padding-bottom: 0;
            display: flex;
            justify-content: center;
        }
    }
}

.addModel{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .bottom{
        padding-top: 20px;
        width: 100%;
        height: calc(100%);
        background: #fff;
        border-radius: 10px;
        .list {
            width: 98%;
            margin: 20px auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .item{
                width: 266px;
                height: 228px;
                margin-right: 25px;
                margin-bottom: 25px;
                position: relative;
                border: 2px solid transparent;
                box-sizing: border-box;
               
                &.active{
                    border: 2px solid red !important;
                }
                &:nth-of-type(3n){
                    margin-right: 0;
                }
                .img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
                .text{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    color: #fff;
                }
            }
        }
    }
}
.no_lsit {
    width: 96%;
    margin:  auto;
    text-align: center;
    img{
        margin: 200px auto;
        width: 518px;
        height: 396px !important;
    }
}
</style>
